<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-tree.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-combobox.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-form.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-popup.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-validate.css">

<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-button.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-tree.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-combobox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-radio.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-checkbox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-popup.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-modal.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-form.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-validate.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/data.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<script type="text/javascript">
$(function () {

    $("#validateForm").BootstrapForm({
    	items: [
    	    {
    	    	id: 'LOGIN_NAME',
    	    	label:'用户名',
	            validators: {
	                notEmpty: {
	                    message: '用户名必须填写！'
	                },
	                remote: {
	                	url: basePath+'/TtApplicationUserController/checkUser',
	                	data: {},
	                	message: '该用户名已存在！'
	                }
	            }
    	    },
    	    {
    	    	id: 'LOGIN_PASSWORD',
    	    	label:'密码',
    	    	type: 'password',
	            validators: {
	                notEmpty: {
	                    message: '密码不能为空！'
	                },
	                stringLength: {
	                	min: 6,
	                    message: '密码至少为六位！'
	                },
	                different: {
	                	field: 'LOGIN_NAME',
	                	message: '用户名和密码不能相同！'
	                },
	                
	            }
    	    },
    	    {
    	    	id: 'CONFIRM_PASSWORD',
    	    	label:'确认密码',
    	    	type: 'password',
	            validators: {
	            	identical: {
	                	field: 'LOGIN_PASSWORD',
	                	message: '确认密码必须跟登录密码相同！'
	                },
	                
	            }
    	    },    	    
    	    {
    	    	id: 'USER_NAME',
    	    	label:'姓名',
    	    },
    	    {
    	    	id: 'USER_PHONE',
    	    	label:'固定电话',
    	    },
    	    {
    	    	id: 'USER_M_PHONE',
    	    	label:'手机号码',
	            validators: {
	            	regexp: {
	            		regexp: /^[0-9_]+$/,
	                	message: '手机号码格式错误！'
	                },	                
	            },
	            onChange: function(value){
	    			var itemName = 'USER_EMAIL';
	    			var obj = $(this).find('div[name='+itemName+']');
	    			obj.find('.value-input').val(value+'@qq.com');	            	
	            }
    	    },
    	    {
    	    	id: 'USER_EMAIL',
    	    	label:'电子邮箱',
    	    },
    	    {
    	    	id: 'POSE',
    	    	label:'职务',
    	    	type: 'combobox',
    	    	options: {
    	    		data: [
    	    		       {value: 10000, text: "业务员"},
    	    		       {value: 20000, text: "经理"},
    	    		       {value: 30000, text: "总裁"},
    	    		    ]
    	    	},
	            validators: {
	                notEmpty: {
	                    message: '职务不能为空！'
	                },	                
	            }    	    	
    	    },
    	    {
    	    	id: 'SEX',
    	    	label:'性别',
    	    	type: 'radio',
    	    	options: {
    	    		name: 'sex',
    	    		data: [
    	    		       {value: 10000, text: "男"},
    	    		       {value: 20000, text: "女"},
    	    		    ]
    	    	},
	            validators: {
	                notEmpty: {
	                    message: '性别不能为空！'
	                },	                
	            }    	    	
    	    },
    	    {
    	    	id: 'ROLE',
    	    	label:'角色',
    	    	type: 'checkbox',
    	    	options: {
    	    		data: [
    	    		       {value: 10000, text: "管理员"},
    	    		       {value: 20000, text: "服务经理"},
    	    		       {value: 30000, text: "服务顾问"},
    	    		    ]
    	    	},
	            validators: {
	                notEmpty: {
	                    message: '角色不能为空！'
	                },	                
	            }    	    	
    	    },    	    
    	    {
    	    	id: 'ORG',
    	    	label:'所属机构',
    	    	type: 'combobox',
    	    	options: {
    	    		editor: {
    	    			type: 'tree',
    	    			options:{
    	    		    	expand: false,
    	    				data: treeData1.toTree('id','pid'),
    	    				onLeafClick: function(data){
    	    					$("#ORG").BootstrapCombobox('selectItem',data.id,data.text);
    	    					$("input",$("#ORG")).trigger('change');
    	    				}
    	    		    }
    	    		}
    	    	},
	            validators: {
	                notEmpty: {
	                    message: '所属机构不能为空！'
	                },	                
	            }    	    	
    	    },
    	    {
    	    	id: 'BIRTH_DAY',
    	    	label:'生日',
    	    	type: 'datetime',
    	    	options: {
    	            language: 'zh-CN',
    	            autoclose: true,
    	            todayBtn: true,
    	            pickerPosition: "bottom-left",
    	            minuteStep: 5,
    	            format: 'yyyy-mm-dd',
    	            minView: 'month'
    	    	},
	            validators: {
	                notEmpty: {
	                    message: '生日不能为空！'
	                },	                
	            }    	    	
    	    },
    	    {
    	    	id: 'LEADER',
    	    	label:'上级领导',
    	    	type: 'popup',
    	    	options: {
    	        	readonly: true,
    	        	multiMode: true,
    	        	header: '人员选择',
    	        	valueField: 'loginName',
    	        	textField: 'userName',
    	        	editor: {
    	        		type: 'table',
    	        		options: {
    	        			columns: [
    	      						{display : '登录名', name: 'loginName'},
    	      						{display : '姓名', name: 'userName'},
    	      						{display : '电话', name: 'userPhone'},
    	      						{display : '移动电话', name: 'userMPhome'},
    	      						{display : '电子邮箱', name: 'userEmail'},
    	        			],
    	     				url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserList',		
    	     				usePager: true
    	        		}
    	        	},
    	    	},
	            validators: {
	                notEmpty: {
	                    message: '上级领导不能为空！'
	                },	                
	            }    	    	
    	    },    	    
    	]
    });
	
});

function validate(){
	if($("#validateForm").BootstrapForm('validate')){
		alert("校验通过！");
	}else{
		alert("校验不通过！");
	}
}

</script>
</head>

<body>  
	<div class="container">  
		<nav id="menu"></nav>
		  
		<div class="panel panel-default">
	        <div class="panel-heading">表单校验</div>
			<div class="panel-body">
			    <div id="validateForm"></div>
			    <div><button class="btn btn-primary btn-sm" type="button" onclick="validate()">校验表单数据</button></div>
		     </div>
		     <div class="panel-footer">
		     对表单元素进行校验，需要对表单元素定义validators属性                                                                                    </br>
			        目前有6种校验形式，分别是：                                                                                                                                                                                              </br>
			        非空校验              	    notEmpty                                                 </br>
			         长度校验              	    stringLength                                                 </br>
			          相同校验              	    identical                                                 </br>
			           相异校验              	    different                                                 </br>
			            正则校验              	    regexp                                                 </br>
			            远程校验              	    remote                                                 </br>
			            当该元素的值改变时会触发校验                                                                                                                                                                                         </br>
			            方法validate可以对表单的所有元素进行校验                                                                                                                                                      </br>
		     </div>	
	    </div>	    
		
    </div>
</body>

</html>